﻿<extend name="Public:office" />
<block name="title"><title>部门任务列表</title></block>
<block name="header_styles">
    <style type="text/css">
        .main-wrapper .container {
            background-color: #ffffff;
        }
    </style>
</block>
<block name="main">
    <div class="tabs-wrapper">
        <include file="Task:menu" />
        <div class="tab-content">
            <div class="tab-pane active" style="min-height: 600px;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="{:U('Task/taskcard')}" class="link-back"><i class="fa fa-reply"></i></a>
                        &nbsp;&nbsp;
                        <strong class="task-heading">{$card.name}</strong>
                    </div>
                </div>
                <div class="mytasks" id="mytasktab">
                    <div class="mytasks-column">
                        <div class="mytasks-panel ">
                            <div class="panel-title">待认领</div>
                            <div class="panel-content">
                                <div id="taskstatus1"></div>
                                <eq name='adder' value='1'>
                                    <div class="text-center">
                                        <a href="javascript:void(0);" class="btn btn-default btn-add-task"><i class="fa fa-plus"></i> 添加任务</a>
                                    </div>
                                </eq>
                            </div>
                        </div>
                    </div>
                    <div class="mytasks-column">
                        <div class="mytasks-panel ">
                            <div class="panel-title">进行中</div>
                            <div class="panel-content" id="taskstatus2"></div>
                        </div>
                    </div>
                    <div class="mytasks-column">
                        <div class="mytasks-panel ">
                            <div class="panel-title">已提交</div>
                            <div class="panel-content" id="taskstatus3"></div>
                        </div>
                    </div>
                    <div class="mytasks-column">
                        <div class="mytasks-panel ">
                            <div class="panel-title">已验收</div>
                            <div class="panel-content" id="taskstatus4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_scripts">
    <script type="x-kendo-template" id="tplTaskItem">
        <div class="mytasks-item">
            <div class="pull-right" style="vertical-align:middle;">
                <a href="javascript:void(0);" class="edit-task" data-id="#:id#"><i class="fa fa-edit"></i></a>
                <a href="javascript:void(0);" class="remove-task" data-id="#:id#"><i class="fa fa-trash"></i></a>
            </div>
            <div class="mytasks-description">
                #:content#
            </div>
            <div class="mytasks-author">
                <div>
                    <label>执行者:</label>&nbsp;#:rolename#
                </div>
                <div>
                    <label>创建者:</label>&nbsp;#:sender#
                </div>
                <div>
                    <label>期限:</label>&nbsp;#:deadline#
                </div>
                <div>
                    <select class="change-status" id='t_#:id#' data-id="#:id#">
                        <option value="1" #if(status==1){#selected#}#>待认领</option>
                        <option value="2" #if(status==2){#selected#}#>进行中</option>
                        <option value="3" #if(status==3){#selected#}#>已提交</option>
                        <option value="4" #if(status==4){#selected#}#>已验收</option>
                    </select>
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-template" id="tplAddTask">
        <form id="formAddTask" method="POST" style="text-align:left;">
            <input type="hidden" name="taskId" id="hfTaskId" value="" />
            <div class="form-group">
                <textarea id="content" name="description" style="width:99%;" rows="5" placeholder="任务内容,最多200字..." maxlength="200"
                          data-val="true" data-val-required="任务内容不能为空" class="form-control"></textarea>
                <span data-valmsg-for="description" data-valmsg-replace="true"></span>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <select id="ddlManager" name="ddlManager" style="width:180px;" data-val="true" data-val-required="执行人不能为空">
                        <option value="">选择执行人</option>
                    </select>
                    <span data-valmsg-for="ddlManager" data-valmsg-replace="true"></span>
                </div>
                <div class="col-xs-6">
                    <input type="text" id="txtExpireDate" name="txtExpireDate" data-val="true"
                           data-val-regex="无效日期格式"
                           data-val-regex-pattern="(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)"
                           data-val-required="过期时间不能为空" placeholder="过期时间" />
                    <span data-valmsg-for="txtExpireDate" data-valmsg-replace="true"></span>
                </div>
            </div>
        </form>
    </script>
    <script type="text/javascript">
        require(["jquery",
            "modules/message",
            "kendoui/kendo.web.min",
            "kendoui/kendo.dropdownlist.min",
            "kendoui/kendo.datepicker.min",
            "culture"], function ($, messageBox) {
            function loadTaskStatus() {
                $("#taskstatus1,#taskstatus2,#taskstatus3,#taskstatus4").html("");
                kendo.ui.progress($("#mytasktab"), true);
                $.ajax({ 
                    url: "{:U('Task/tasklist_ajax', array('type'=>3,'card'=>$card['id']))}",
                    type: "get",
                    dataType: "json",
                    success: function (response) {
                        if (response.data.status1) {
                            renderTemplateHtml(1, response.data.status1);
                        }
                        if (response.data.status2) {
                            renderTemplateHtml(2, response.data.status2);
                        }
                        if (response.data.status3) {
                            renderTemplateHtml(3, response.data.status3);
                        }
                        if (response.data.status4) {
                            renderTemplateHtml(4, response.data.status4);
                        }
                        initChangeStatus();
                        kendo.ui.progress($("#mytasktab"), false);
                    }
                });
            }

            function renderTemplateHtml(status, data) {
                var tpl = kendo.template($("#tplTaskItem").html());
                var html = kendo.render(tpl, data);
                $("#taskstatus" + status).html(html);
            }

            function initChangeStatus() {
                $('.change-status').off("change").change(function () {
                    var url = "{:U('Task/setTaskstatus_ajax')}";
                    var id = $(this).data('id');
                    var status = $(this).find("option:selected").val();
                    if (status) {
                        $.post(url, { id: id, status: status }, function (data) {
                            var vdata = eval(data);
                            if (vdata.success == '1') {
                                loadTaskStatus();
                            } else {
                                messageBox.alert({ content: vdata.msg });
                            }
                        }, 'json');
                    }
                    return false;
                });
            }
            $(document).on("click", "a.remove-task", function () {
                var task = $(this).data("id");
                messageBox.confirm({
                    content: '确定要删除该任务吗？删除后无法恢复。', sure: function () {
                        var url = "{:U('Task/deltask_ajax')}";
                        $.post(url, { 'task': task }, function (data) {
                            messageBox.close();
                            var vdata = eval(data);
                            if (vdata.success == 1) {
                                loadTaskStatus();
                            }
                            else {
                                messageBox.alert({ content: vdata.msg });
                            }
                        }, 'json');
                    }
                });
            });
            $(document).on("click", "a.edit-task", function () {
                var task = $(this).data("id");
                $.ajax({
                    url: "{:U('/Task/getTask_ajax', '', '')}-task-" + task,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            showEditForm(data.data[0]);
                        }
                    }
                });
            });

            function showEditForm(data) {
                messageBox.confirm({
                    contentId: "#tplAddTask",
                    title: "编辑任务",
                    afterOpen: function () {
                        $("#hfTaskId").val(data.id)
                        $("#content").val(data.content)
                        $("#txtExpireDate").kendoDatePicker({ format: "yyyy-MM-dd" });
                        var txtExpireDate = $("#txtExpireDate").data('kendoDatePicker');
                        $("#ddlManager").kendoDropDownList({
                            dataTextField: "nickname",
                            dataValueField: "userid",

                            dataSource: {
                                transport: {
                                    read: {
                                        dataType: "json",
                                        url: "{:U('Task/members_ajax')}",
                                    }
                                }
                            }
                        });
                        var ddlManager = $("#ddlManager").data("kendoDropDownList");

                        txtExpireDate.min(data.deadline);
                        txtExpireDate.value(data.deadline);
                        ddlManager.value(data.roleid);
                        $.validator.unobtrusive.parse("#formAddTask");
                    },
                    sureText: "保存",
                    sure: function () {
                        saveEditTask();
                    }
                });
            }

            function saveEditTask() {
                if (!$("#formAddTask").valid()) {
                    return false;
                }
                var url = "{:U('/Task/editTask_ajax')}";
                var dataholder = $("#ddlManager").data("kendoDropDownList");
                var content = $('#content').val();
                var member = dataholder.value();//$('#ddlManager').val();
                var rolename = dataholder.text();
                var deadline = $('#txtExpireDate').val();
                var taskId = $("#hfTaskId").val();
                $.post(url, { task: taskId, content: content, member: member, rolename: rolename, deadline: deadline }, function (data) {
                    var vdata = eval(data);
                    if (vdata.success == 1) {
                        $.fancybox.close();
                        $("#formAddTask").get(0).reset();
                        loadTaskStatus();
                    }
                    else {
                        messageBox.alert({ content: vdata.msg });
                    }
                }, 'json');
                return false;
            }

            //保存任务
            function saveTask() {
                if (!$("#formAddTask").valid()) {
                    return false;
                }
                var url = "{:U('/Task/addTask_ajax')}";
                var dataholder = $("#ddlManager").data("kendoDropDownList");
                var content = $('#content').val();
                var member = dataholder.value();//$('#ddlManager').val();
                var rolename = dataholder.text();
                var deadline = $('#txtExpireDate').val();
                var prj = parseInt("{$card.pid|default=0}");
                var card = parseInt("{$card.id|default=0}");
                var cardname = '{$card.name|default=0}';
                $.post(url, { content: content, member: member, rolename: rolename, deadline: deadline, prj: prj, card: card, cardname: cardname }, function (data) {
                    var vdata = eval(data);
                    if (vdata.success == 1) {
                        $.fancybox.close();
                        $("#formAddTask").get(0).reset();
                        loadTaskStatus();
                    }
                    else {
                        messageBox.alert({ content:vdata.msg});
                    }
                }, 'json');
                return false;
            }

            $(function () {
                loadTaskStatus();
                kendo.culture("zh-CN");
                $(".btn-add-task").click(function () {
                    messageBox.confirm({
                        contentId: "#tplAddTask",
                        title: "添加任务",
                        afterOpen: function () {
                            $("#txtExpireDate").kendoDatePicker({ format: "yyyy-MM-dd" });
                            $("#txtExpireDate").data('kendoDatePicker').min(new Date());
                            $("#ddlManager").kendoDropDownList({
                                dataTextField: "nickname",
                                dataValueField: "userid",
                                valueTemplate: kendo.template($("#tplManagerValue").html()),
                                template: kendo.template($("#tplManagerView").html()),
                                dataSource: {
                                    transport: {
                                        read: {
                                            dataType: "json",
                                            url: "{:U('/Task/members_ajax')}",
                                        }
                                    }
                                }
                            });
                            $.validator.unobtrusive.parse("#formAddTask");
                        },
                        sureText: "保存",
                        sure: function () {
                            saveTask();
                        }
                    });
                });
            });
        });
    </script>
    <script id="tplManagerValue" type="text/x-kendo-template">
        <img class="selected-value" src="__APP__/#:data.photo#" style="width:25px;" />
        <span>#:data.nickname#</span>
    </script>

    <script id="tplManagerView" type="text/x-kendo-template">
        <div class="manager-item">
            <img src="__APP__/#:data.photo#" style="width:40px;" />
            <h3>#:data.nickname#</h3>
        </div>
    </script>
</block>
